<template>
  <div class="way-box">
    <div class="lc-1">
      <el-link type="danger">忘记密码?</el-link>
      <span><el-divider direction="vertical" /></span>
      <el-link type="warning">重置密码?</el-link>
    </div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content ep-bg-purple">
          <el-icon size="28" color="white"><ElemeFilled /></el-icon>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ep-bg-purple">
          <el-icon size="28" color="white"><ElementPlus /></el-icon>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ep-bg-purple">
          <el-icon size="28" color="white"><ChromeFilled /></el-icon>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ep-bg-purple">
          <el-icon size="28" color="white"><Shop /></el-icon>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>

</script>

<style lang="less" scoped>
.way-box{
    width: 80%;
    height: 100%;
    margin-left: 10%;
    margin-top: 35px;
    .lc-1{
      width: 100%;
      height: 30px;
      text-align: center;
      margin-top: 10px;
      margin-bottom: 20px;
    }
    .grid-content{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100px;
      height: 35px;
      text-align: center;
      line-height: 35px;
      background-color: rgb(93, 133, 218);
      border-radius: 8px;
      cursor: pointer;
    }
}
</style>